<script setup>
import request from '@/utils/common/request'
import { v6 as uuidv6 } from 'uuid';
import { ref, reactive } from 'vue'
import qs from 'qs'
const price=ref(0)
async function handle() {
  const orderId=uuidv6()
  
    let data={
        orderId:orderId,
        price:price.value,
        detail:'测试商品'
    }
  const res = await request({
    url: '/api/payment',
    method: 'post',
    data:qs.stringify(data)
  })
  

//  创建一个a 标签，并将他的href等于res.result
  const a = document.createElement('a')
  a.href=res.result
  a.click()


}
</script>

<template>
  <div class="payment-wrapper">
    <span>请输入支付金额</span> <el-input v-model="price" style="width: 250px;"></el-input>
    <button class="payment" @click="handle">支付</button>
    <a href=""></a>
  </div>
</template>

<style lang="scss" scoped>
.payment-wrapper{
  @include display-flex-center;
  flex-direction: column;
}
.payment {
  width: 150px;
  height: 50px;
  background-color: rgb(69, 203, 236);
  border-radius: 25px;
  border: 0;
  @include lineHeight(50px);
  color: white;
  letter-spacing: 5px;
  margin-top: 50px;
  cursor: pointer;
}
</style>
